<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-row class="header">
    <el-col :span="2">
      <el-text>
        <el-icon><icon-menu /></el-icon>
        图标
      </el-text>
    </el-col>
    <el-col :span="19"></el-col>
    <el-col :span="2">
      <el-text class="mx-1" size="large">VRGlobe Examples</el-text>
    </el-col>
    <el-col :span="1"></el-col>
  </el-row>
  <el-row class="body">
    <el-col :span="3">
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <router-link to="/hello-world">
          <el-menu-item index="1">
            <span>Hello World</span>
          </el-menu-item>
        </router-link>

        <router-link to="/resource-tree">
          <el-menu-item index="2">
            <span>资源树</span>
          </el-menu-item>
        </router-link>

        <router-link to="/project">
          <el-menu-item index="3">
            <span>工程管理</span>
          </el-menu-item>
        </router-link>

        <router-link to="/particle">
          <el-menu-item index="4">
            <span>粒子效果</span>
          </el-menu-item>
        </router-link>

      </el-menu>
    </el-col>
    <el-col :span="21" class="index-content">
      <router-view></router-view>
    </el-col>
  </el-row>

</template>

<style scoped lang="less">
.header {
  height: 60px;
  background-color: #353535;

  .el-text {
    user-select: none;
    color: white;
    line-height: 60px;
  }
}

.body {
  height: 1018px;
  background-color: #f7f7f7;

  a {
    color: black;
  }

  .is-active {
    color: #f38c3b;
  }

  .el-menu-item:hover {
    color: #f38c3b;
    background-color: #fff6ee;
  }
}

.index-content {
  .el-col:first-child {
    margin-left: 55px;
  }

  .el-col {
    margin-top: 40px;
    margin-left: 40px;
    height: 300px;
    border-radius: 10px;
    background-color: #ffffff;

    div {
      margin-left: 3%;
      margin-top: 3%;
      width: 94%;
      height: 80%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    span {
      margin-left: 45%;
      line-height: 50px;
    }
  }

  .el-col:hover {
    cursor: pointer;
    color: #f38c3b;
  }

}

.index1 {
  background-color: red;
}

.index2 {
  background-color: green;
}

.index3 {
  background-color: blue;
}
</style>
